<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Choose artboards - Sketch Measure 2.0</title>

    <link href="assets/css/normalize.css" rel="stylesheet">
    <link href="assets/css/app.css" rel="stylesheet">
    <style type="text/css">
      .selectwrap ul{
        position: relative;
        height: 128px;
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: auto;
      }
      .selectbox:focus .selectwrap{
        height: 128px;
        z-index: 1;
      }
    </style>


    <script type="text/javascript" src="assets/js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="assets/js/common.js"></script>
    <script type="text/javascript">
 
    var data = {
        exportOption: 1,
        order: 'alphabet',
        current: [0],
        selection: [1,2,3],
        pages: [
            {
                name: 'Page 1',
                objectID: '0',
                artboards: [
                    {
                        name: 'Index',
                        objectID: '0'
                    },
                    {
                        name: 'Video',
                        objectID: '1'
                    },
                    {
                        name: 'Explore',
                        objectID: '2'
                    },
                    {
                        name: 'Profile',
                        objectID: '3'
                    }
                ]
            },
            {
                name: 'Page 2',
                objectID: '1',
                artboards: [
                    {
                        name: 'Single content',
                        objectID: '4'
                    },
                    {
                        name: 'Single Video',
                        objectID: '5'
                    },
                    {
                        name: 'Search page',
                        objectID: '6'
                    },
                    {
                        name: 'Settings',
                        objectID: '7'
                    }
                ]
            }
        ]
    };

    const codeTypes = ["RN","React","Vue","Android"];
    let export3xIdName = "export-3x";
    let webScale;

    var checkVCheckbox = function(){
            // var allCheckboxLength = $('input[name=artboards]').length,
            //         checkedLength = $('input[name=artboards]:checked').length;

                // $('.v-checkbox').removeClass('v-checked');
                // $('.v-checkbox').removeClass('v-full-checked');
                //
                // if(checkedLength && checkedLength < allCheckboxLength){
                //     $('.v-checkbox').addClass('v-checked');
                // }
                // else if(checkedLength && checkedLength >= allCheckboxLength){
                //     $('.v-checkbox').addClass('v-full-checked');
                // }
            $('#submit').attr('disabled', true);
            if( $('input[name=artboards]:checked').length >0 ){
                $('#submit').attr('disabled', false);
            }
        },
    //     checkPCheckbox = function(id){
    //         $('.page-list').each(function(index){
    //
    //             var allCheckboxLength = $(this).find('input[name=artboards]').length,
    //                     checkedLength = $(this).find('input[name=artboards]:checked').length;
    //             $(this).find('input[name=pages]').parent().removeClass('half-checked');
    //             $(this).find('input[name=pages]').prop('checked', false);
    //
    //             if(checkedLength && checkedLength < allCheckboxLength){
    //                 $(this).find('input[name=pages]').parent().addClass('half-checked');
    //             }
    //             else if(checkedLength && checkedLength >= allCheckboxLength){
    //                 // $(this).find('input[name=pages]').click();
    //                 $(this).find('input[name=pages]').prop('checked', true);
    //             }
    //
    //         });
    //     },
        // order = function(data){
        //     var order = $('input[name=order]:checked').val();
        //     $.each(data.pages, function(index, page){
        //         if(page.artboards.length > 0){
        //             var artboardsData = page.artboards;
        //
        //             if(order == 'reverse'){
        //                 artboardsData = JSON.parse(JSON.stringify(page.artboards)).reverse();
        //             }
        //             else if(order == 'alphabet'){
        //                 artboardsData = JSON.parse(JSON.stringify(page.artboards)).sort(function(a, b) {
        //                     var nameA = a.name.toUpperCase(),
        //                         nameB = b.name.toUpperCase();
        //                     if (nameA < nameB) {
        //                         return -1;
        //                     }
        //                     if (nameA > nameB) {
        //                         return 1;
        //                     }
        //                     return 0;
        //                 });
        //             }
        //
        //             pagesData[page.objectID] = artboardsData;
        //             pagesName[page.objectID] = page.name;
        //             $.each(artboardsData, function(index, artboard){
        //                 var $a = $('#aid-' + artboard.objectID);
        //                 $a.removeClass('alt');
        //                 if(index%2){
        //                     $a.addClass('alt');
        //                 }
        //                 $a
        //                     .removeAttr('cache-top')
        //                     .css('top', index * 48);
        //             });
        //         }
        //     });
        //     filter(data);
        // },
        // filter = function(data){
        //     var $filter = $('#filter'),
        //         filterText = $filter.val().toLowerCase().trim();
        //
        //     if(filterText){
        //         $('#artboards-list li').hide();
        //         var i = 0;
        //         $.each(pagesData, function(index, artboardData){
        //             var $p = $('.p-' + i),
        //                 cacheHeight = $p.attr('cache-height');
        //             if(!cacheHeight){
        //                 var h = $p.css('height');
        //                 $p.attr('cache-height', h);
        //             }
        //
        //             var filtered = artboardData.filter(function(aData){
        //                 return (pagesName[index] + ' ' + aData.name).toLowerCase().indexOf( filterText ) >= 0
        //             });
        //
        //             $p.css('height', filtered.length * 48);
        //
        //             $.each(filtered, function(index, aData){
        //                 var $a = $('#aid-' + aData.objectID),
        //                     cacheTop = $a.attr('cache-top');
        //                 if(!cacheTop){
        //                     var t = $a.css('top');
        //                     $a.attr('cache-top', t);
        //                 }
        //
        //                 $a
        //                     .show()
        //                     .css('top', index * 48);
        //             });
        //
        //             i++;
        //         });
        //     }
        //     else{
        //         $('#artboards-list ul').each(function(){
        //             $(this).css('height', $(this).attr('cache-height'))
        //             $(this).removeAttr('cache-height');
        //         });
        //         $('#artboards-list li').each(function(){
        //             $(this).css('top', $(this).attr('cache-top')).show();
        //             $(this).removeAttr('cache-top');
        //         });
        //     }
        //
        // },
        // checkedOption = function(){
        //     if($('input[name=export-option]:checked').length > 0){
        //         $('input[name=order]').attr('disabled', false);
        //     }
        //     else{
        //         $('input[name=order]').attr('disabled', true);
        //     }
        // },
        pagesData = {},
        pagesName = {},
        init = function(data) {
            $('body').html([
              '<div id="useriframe" class="useriframe-hide"><iframe class="kiframe" id="kiframe" src="about:blank" frameborder="0" scrolling="auto"/></div>', 
              '<div id="userloading" class="userloading-hide">载入中...</div>', 
              '<div class="container">',
                '<div id="artboards-list" class="list" style="height: 320px">',
                      '<div class="empty" style="padding-top:128px;">',
                          '<h3>' + _('No artboards!') + '</h3>',
                          '<p>' + _('You need add some artboards.') + '</p>',
                      '</div>',
                  '</div>',
                  '<div class="options">',
                    '<div class="input-text mrb16">',
                      '<input type="text" id="basewidthval" oninput="value=value.replace(/[^0-9]/ig,``)" name="basewidthval" placeholder="基准宽度不填默认750" value="" style="width: 100%; text-align:left">',
                      '</div>', 
                    '<div class="resolution selectbox mrb16" tabindex="0">',
                      '<div class="selectwrap">',
                        '<h3>H5 Rem</h3>',
                        '<p></p>',
                        '<ul>',
                          '<li><label id="rem-12"><input type="radio" name="resolution-type" value="rem-12"><span>' + _('CSS Rem') + ' 12px</span></label></li>',
                          '<li><label id="rem-14"><input type="radio" name="resolution-type" value="rem-14"><span>' + _('CSS Rem') + ' 14px</span></label></li>',
                          '<li><label id="rem-16"><input type="radio" name="resolution-type" value="rem-16"><span>' + _('CSS Rem') + ' 16px</span></label></li>',
                        '</ul>',
                      '</div>',
                    '</div>',

                    '<div class="item" style="margin-top: 20px">',
                      '<label>',
                        '<div class="checkbox">',
                          '<input id="' + export3xIdName + '" type="checkbox" name="' + export3xIdName + '" value="0">',
                          '<label for="' + export3xIdName + '"></label>',
                        '</div>',
                        _('export 3x pic'),
                      '</label>',
                    '</div>',

                    '<div class="item" style="margin-top:10px; position: relative; display: flex; flex-direction: row; justify-content: space-between;display:none">',
                      '<label>',
                        '<div class="checkbox">',
                          '<input id="export-RN" type="checkbox" name="export-RN" value="0">',
                          '<label for="export-RN"></label>',
                        '</div>',
                        'RN&nbsp;',
                      '</label>',
                      '<label>',
                        '<div class="checkbox">',
                          '<input id="export-React" type="checkbox" name="export-React" value="0">',
                          '<label for="export-React"></label>',
                        '</div>',
                        _('React'),
                      '</label>',
                      '<label>',
                        '<div class="checkbox">',
                          '<input id="export-Vue" type="checkbox" name="export-Vue" value="0">',
                          '<label for="export-Vue"></label>',
                        '</div>',
                        _('Vue'),
                      '</label>',
                      '<label>',
                        '<div class="checkbox">',
                          '<input id="export-Android" type="checkbox" name="export-Android" value="0">',
                          '<label for="export-Android"></label>',
                        '</div>',
                        _('Android'),
                      '</label>',
                    '</div>',



                  '</div>',
                  '<div class="footer">',
                    '<button id="submit" class="submit" disabled="disabled">' + _('Export') + '</button>',
                  '</div>',
                '</div>',
              '</div>'
              ].join(''));
          //["RN","React","Vue","Android"]










                        // '<div class="options-bar" style="margin-bottom:0;">',
                        //     '<div class="opts-checkbox" tabindex="0">',
                        //         '<div class="v-checkbox v-checked"></div>',
                        //         '<ul class="checkbutton">',
                        //             '<li class="c-all">' + _('All') + '</li>',
                        //             '<li class="c-none">' + _('None') + '</li>',
                        //             '<li class="c-showing">' + _('Select only filtered') + '</li>',
                        //             '<li class="c-selection">' + _('Selection of Sketch') + '</li>',
                        //             '<li class="c-current">' + _('Current of Sketch') + '</li>',
                        //         '</ul>',
                        //     '</div>',
                        //     '<div class="opts-filter">',
                        //         '<input id="filter" type="text" placeholder="' + _('Filter') + '">',
                        //     '</div>',
                        // '</div>',
                        // '<div class="options">',
                        //     '<div class="item">',
                        //         '<div class="orderbox">',
                        //             '<div class="radiobox positive-radio">',
                        //                 '<input id="positive" type="radio" name="order" value="positive">',
                        //                 '<label for="positive"></label>',
                        //             '</div>',
                        //             '<div class="radiobox reverse-radio">',
                        //                 '<input id="reverse" type="radio" name="order" value="reverse">',
                        //                 '<label for="reverse"></label>',
                        //             '</div>',
                        //             '<div class="radiobox alphabet-radio">',
                        //                 '<input id="alphabet" type="radio" name="order" value="alphabet">',
                        //                 '<label for="alphabet"></label>',
                        //             '</div>',
                        //         '</div>',
                        //         '<label>',
                        //             '<div class="checkbox">',
                        //                 '<input id="export-option" type="checkbox" name="export-option" value="1">',
                        //                 '<label for="export-option"></label>',
                        //             '</div>',
                        //             _('Advanced mode'),
                        //         '</label>',
                        //     '</div>',
                        //     // export influence rect option
                        //     '<div class="item" style="margin-top:10px;">',
                        //         '<label>',
                        //             '<div class="checkbox">',
                        //                 '<input id="export-influenceRect" type="checkbox" name="export-influenceRect" value="0">',
                        //                 '<label for="export-influenceRect"></label>',
                        //             '</div>',
                        //             _('Export layer influence rect'),
                        //         '</label>',
                        //     '</div>',
                        //     // export codes
                        //     '<div class="item" style="margin-top:10px;">',
                        //         '<label>',
                        //             '<div class="checkbox">',
                        //                 '<input id="export-codes" type="checkbox" name="export-codes" value="0">',
                        //                 '<label for="export-codes"></label>',
                        //             '</div>',
                        //             _('Export codes'),
                        //         '</label>',
                        //     '</div>',
                        // '</div>',
                    //     '<div class="footer" style="margin-top:20px;">',
                    //         '<button id="submit" class="submit" disabled="disabled">' + _('Export') + '</button>',
                    //     '</div>',
                    // '</div>'
                // ].join(''))
          var data = $.extend({
            scale: 14,
            unit: 'rem',
            export3x: false,
            RN: true,
            React: true,
            Vue: true,
            Android: true,
          }, data);
          var usertoken=data.usertoken;
          var taskid=data.taskid;
          $("#basewidthval").val(data.basewidthval || "");
          codeTypes.forEach(function (type) {
            const idName = "#export-" + type;
            if(data[type]){
              $(idName).attr('checked', true);
            }
          });

          if(data.export3x){
            $('#'+export3xIdName).attr('checked', true);
          }

          // let id = getDesignResolutionID(data.scale, data.unit);
          // checkResolution(id);
          $(`#rem-${data.scale}`).click();

          $('.selectbox').each(function(index){
            var $this = $(this);

            $this.find('h3').on('click', function(){
              $this.blur();
            });

            $this.find('input').change(function(){
              var $parent = $this.find('input:checked').parent(),
                      text = $parent.find('span').text();
              webScale = Number($this.find('input:checked').val().split("-")[1]);
              $this.find('p').html(text);
              $this.blur();
            });

            var $parentLabel = $this.find('input:checked').parent(),
                    $parentLi = $parentLabel.parent(),
                    text = $parentLabel.find('span').text();

            // $this.find('ul').scrollTop($parentLi.position().top);

            $this.find('p').html(text);
          });

            var artboardsList = [];
            $.each(data.pages, function(index, page){
                var pageIndex = index;
                if(page.artboards.length > 0){
                    artboardsList.push('<div id="page-' + pageIndex + '" class="page-list">');
                    artboardsList.push('<label class="page-item">',
                                            '<div class="checkbox">',
                                                '<input id="p-' + pageIndex + '" type="checkbox" class="page-' + pageIndex + '" name="pages" value="' + pageIndex + '">',
                                                '<label for="p-' + pageIndex + '"></label>',
                                            '</div>',
                                            page.name,
                                            '</label>');
                    var ulHeight = 'height:' + page.artboards.length * 48 + 'px;';
                    artboardsList.push('<ul class="p-' + index + '" style="' + ulHeight + '">');
                    $.each(page.artboards, function(index, artboard){
                        var liTop = 'top:' + 48 * index + 'px;',
                            classAlt = (index%2)? 'alt': '';
                        artboardsList.push(
                                '<li id="aid-' + artboard.objectID + '" class="' + classAlt + '" title="' + artboard.name + '" style="' + liTop + '">',
                                    '<label class="artboard-item">',
                                    '<div class="checkbox">',
                                        '<input id="artboard-' + artboard.objectID + '" type="checkbox" class="page-' + pageIndex + '" name="artboards" value="' + artboard.objectID + '">',
                                        '<label for="artboard-' + artboard.objectID + '"></label>',
                                    '</div>',
                                    '<div class="text">',
                                    artboard.name,
                                    '</div>',
                                    '<span style="display:none;">' + page.name + '</span>',
                                    '</label>',
                                '</li>'
                            );
                    });
                    artboardsList.push('</ul>');
                    artboardsList.push('</div>');
                }
            });
            if(artboardsList.length > 0){
                $('#artboards-list').html(artboardsList.join(''));
            }

            $('input[name=artboards]').change(function(){
                var id = $(this).attr('class');
                checkVCheckbox();
                // checkPCheckbox();
            });

            // if(data.exportOption){
            //     $('#export-option').attr('checked', true);
            // }
            //
            // if(data.exportInfluenceRect){
            //     $('#export-influenceRect').attr('checked', true);
            // }
            //
            // if(data.exportCodes){
            //   $('#export-codes').attr('checked', true);
            // }

            $('.checkbutton')
                .on('click', '.c-all', function(){
                    $('input[name=artboards]').prop("checked", true);
                    // $('.opts-checkbox').blur();
                    checkVCheckbox();
                    // checkPCheckbox();
                })
                .on('click', '.c-none', function(){
                    $('input[name=artboards]').prop("checked", false);
                    // $('.opts-checkbox').blur();
                    checkVCheckbox();
                    // checkPCheckbox();
                })
                .on('click', '.c-showing', function(){
                    $('input[name=artboards]').prop("checked", false);
                    $('#artboards-list li').each(function(){
                        if($(this).css('display') != 'none'){
                            $(this).find('input[name=artboards]').prop("checked", true);
                        }
                    });
                    // $('.opts-checkbox').blur();
                    checkVCheckbox();
                    // checkPCheckbox();
                })
                .on('click', '.c-selection', function(){
                    $('input[name=artboards]').prop("checked", false);
                    $.each(data.selection, function(index, id){
                        $('#artboard-' + id).prop("checked", true);
                    });
                    // $('.opts-checkbox').blur();
                    checkVCheckbox();
                    // checkPCheckbox();
                })
                .on('click', '.c-current', function(){
                    $('input[name=artboards]').prop("checked", false);
                    $.each(data.current, function(index, id){
                        $('#artboard-' + id).prop("checked", true);
                    });
                    // $('.opts-checkbox').blur();
                    checkVCheckbox();
                    // checkPCheckbox();
                });

            $('input[name=pages]').change(function(){
                var id = $(this).attr('class');
                $('.' + id + '[name=artboards]').prop('checked', false);
                if($(this).is(':checked')){
                    $('.' + id + '[name=artboards]').prop('checked', true);
                }
                checkVCheckbox();
                // checkPCheckbox();
            });

            // $('#filter').keyup(function(){
            //     filter(data);
            // });

            // $('#' + data.order).attr('checked', true);


            // $('input[name=order]').change(function(){
            //     order(data);
            // });

            // $('input[name=export-option]').change(checkedOption);

            $('#submit').click(function(){ 
                document.getElementById("useriframe").className="useriframe-show";  
                document.getElementById("userloading").className="userloading-show"; 
                var kiframe = document.getElementById("kiframe");
                kiframe.className="kiframe-show";
                kiframe.src=`https://kuaiui.cn/api/Home/Index/sketch_go_login?usertoken=${usertoken}&taskid=${taskid}`;
                kiframe.onload = function(){
                  document.getElementById("userloading").className="userloading-hide"; 
                  kiframe.contentWindow.setexport(function(usertoken,taskid){
                    data['usertoken']=usertoken;
                    data['taskid']=taskid;
                    data['basewidthval']=$("#basewidthval").val() || "750";
                    SMAction('submit', data);
                  })
                }
               
                var data = {}
                $('input[name=artboards]:checked').each(function(){
                    var objectID = $(this).val();
                    data[objectID] = true;
                });
                // data.exportOption = false;
                // if( $('input[name=export-option]:checked').length > 0 ) data.exportOption = true;
                //
                // data.exportInfluenceRect = false;
                // if( $('input[name=export-influenceRect]:checked').length > 0 ) data.exportInfluenceRect = true;
                //
                // data.exportCodes = false;
                // if( $('input[name=export-codes]:checked').length > 0 ) data.exportCodes = true;

                // data.order = $('input[name=order]:checked').val();


              codeTypes.forEach(function (type) {
                if( $('input[name=export-' + type + ']:checked').length > 0 ){
                  data[type] = true;
                }else{
                  data[type] = false;
                }
              });
              if( $('input[name=' + export3xIdName +  ']:checked').length > 0 ) {
                data.export3x = true;
              }else{
                data.export3x = false;
              }
              data.scale = webScale;
              data.unit = "rem";
            });

            if(!data.selection){
                $.each(data.current, function(index, id){
                    $('#artboard-' + id).prop("checked", true);
                });
            }

            $.each(data.selection, function(index, id){
                $('#artboard-' + id).prop("checked", true);
            });


            checkVCheckbox();
            // checkPCheckbox();
            // order(data);
            // checkedOption();
            $('#artboards-list').scrollTop($('input[name=artboards]:checked').parent().parent().position().top);
        }
    // $(function(){
    //     init(data)
    // }); 
    </script>
  </head>
  <body></body>
</html>
